<template>
  <div class="dashboard-wrap">
    <div class="title"> 欢迎您~ {{ userInfo.name }} </div>
    <div class="tabs-wrap">
      <a-tabs default-active-key="1" style="height: 100%" lazy-load>
        <a-tab-pane key="1" title="个人主页" style="height: 100%">
          <PersonPage></PersonPage>
        </a-tab-pane>
        <a-tab-pane key="2" title="项目列表" style="height: 100%">
          <ProjectList></ProjectList>
        </a-tab-pane>
        <a-tab-pane key="3" title="项目模版" style="height: 100%">
          <ProjectTemplate></ProjectTemplate>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { computed } from 'vue';
  import { useUserStore } from '@/store';
  import PersonPage from './components/person-page/person-page.vue';
  import ProjectList from './components/project-list/project-list.vue';
  import ProjectTemplate from './components/project-template/project-template.vue';

  const userStore = useUserStore();
  const userInfo = computed(() => {
    return userStore.userInfo;
  });
</script>

<style scoped lang="less">
  .dashboard-wrap {
    margin-left: 44px;
    margin-right: 44px;
    height: 100%;
    //border: 1px solid #eeebeb;
    .title {
      font-size: 24px;
      font-family: Source Han Sans CN-Medium, Source Han Sans CN, serif;
      font-weight: 500;
      color: #1d2129;
      line-height: 28px;
      margin-top: 24px;
    }
    .tabs-wrap {
      margin-top: 12px;
      //border: 1px solid black;
      height: calc(100% - 70px);
    }
  }
</style>
